---
import { Image } from "astro:assets";
import type { FullscreenWallpaperConfig } from "../../types/config";

interface Props {
	config: FullscreenWallpaperConfig;
	className?: string;
}

const { config, className } = Astro.props;

// 如果全屏壁纸功能未启用，不渲染任何内容
if (!config.enable) {
	return null;
}

// 获取当前设备类型的图片源
const getImageSources = () => {
	const { desktop, mobile } = config.src;
	return {
		desktop: Array.isArray(desktop) ? desktop : desktop ? [desktop] : [],
		mobile: Array.isArray(mobile) ? mobile : mobile ? [mobile] : [],
	};
};

const imageSources = getImageSources();
const hasDesktopImages = imageSources.desktop.length > 0;
const hasMobileImages = imageSources.mobile.length > 0;

// 如果没有任何图片源，不渲染
if (!hasDesktopImages && !hasMobileImages) {
	return null;
}

// 轮播相关逻辑
const isCarouselEnabled = config.carousel?.enable && 
	(imageSources.desktop.length > 1 || imageSources.mobile.length > 1);
const carouselInterval = config.carousel?.interval || 5;

// 样式相关
const position = config.position || "center";
const zIndex = config.zIndex || -1;
const opacity = config.opacity || 0.8;
const blur = config.blur || 0;

// 生成位置类名
const getPositionClass = (pos: string) => {
	switch (pos) {
		case "top":
			return "object-top";
		case "bottom":
			return "object-bottom";
		default:
			return "object-center";
	}
};

const positionClass = getPositionClass(position);
---

<div 
	class:list={[
		"fixed inset-0 w-full h-full overflow-hidden pointer-events-none",
		className
	]}
	style={`z-index: ${zIndex}; opacity: ${opacity};`}
	data-fullscreen-wallpaper
>
	<!-- 桌面端壁纸 -->
	{hasDesktopImages && (
		<div class="hidden lg:block w-full h-full relative">
			{imageSources.desktop.map((src, index) => {
				const isLocal = !src.startsWith("http");
				const imageClass = `absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${positionClass}`;
				
				if (isLocal) {
					// 对于本地图片，使用img标签而不是Image组件
					return (
						<img
							src={src}
							alt={`Desktop wallpaper ${index + 1}`}
							class={imageClass}
							data-carousel-item={isCarouselEnabled ? index : undefined}
							style={blur > 0 ? `filter: blur(${blur}px);` : undefined}
						/>
					);
				} else {
					return (
						<img
							src={src}
							alt={`Desktop wallpaper ${index + 1}`}
							class={imageClass}
							data-carousel-item={isCarouselEnabled ? index : undefined}
							style={blur > 0 ? `filter: blur(${blur}px);` : undefined}
						/>
					);
				}
			})}
		</div>
	)}

	<!-- 移动端壁纸 -->
	{hasMobileImages && (
		<div class="block lg:hidden w-full h-full relative">
			{imageSources.mobile.map((src, index) => {
				const isLocal = !src.startsWith("http");
				const imageClass = `absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${positionClass}`;
				
				if (isLocal) {
					// 对于本地图片，使用img标签而不是Image组件
					return (
						<img
							src={src}
							alt={`Mobile wallpaper ${index + 1}`}
							class={imageClass}
							data-carousel-item={isCarouselEnabled ? index : undefined}
							style={blur > 0 ? `filter: blur(${blur}px);` : undefined}
						/>
					);
				} else {
					return (
						<img
							src={src}
							alt={`Mobile wallpaper ${index + 1}`}
							class={imageClass}
							data-carousel-item={isCarouselEnabled ? index : undefined}
							style={blur > 0 ? `filter: blur(${blur}px);` : undefined}
						/>
					);
				}
			})}
		</div>
	)}
</div>

{isCarouselEnabled && (
	<script define:vars={{ carouselInterval }}>
		// 全屏壁纸轮播逻辑
		function initFullscreenWallpaperCarousel() {
			const wallpaperContainer = document.querySelector('[data-fullscreen-wallpaper]');
			if (!wallpaperContainer) return;

			const desktopItems = wallpaperContainer.querySelectorAll('.hidden.lg\\:block [data-carousel-item]');
			const mobileItems = wallpaperContainer.querySelectorAll('.block.lg\\:hidden [data-carousel-item]');

			function startCarousel(items) {
				if (items.length <= 1) return;

				let currentIndex = 0;
				
				// 初始化：显示第一张，隐藏其他
				items.forEach((item, index) => {
					item.style.opacity = index === 0 ? '1' : '0';
				});

				// 开始轮播
				setInterval(() => {
					// 隐藏当前图片
					items[currentIndex].style.opacity = '0';
					
					// 切换到下一张
					currentIndex = (currentIndex + 1) % items.length;
					
					// 显示下一张图片
					items[currentIndex].style.opacity = '1';
				}, carouselInterval * 1000);
			}

			// 分别为桌面端和移动端启动轮播
			if (desktopItems.length > 0) {
				startCarousel(desktopItems);
			}
			if (mobileItems.length > 0) {
				startCarousel(mobileItems);
			}
		}

		// 页面加载完成后初始化轮播
		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', initFullscreenWallpaperCarousel);
		} else {
			initFullscreenWallpaperCarousel();
		}
	</script>
)}